<template>
  <el-config-provider :locale="locale">
    <el-date-picker style="width:100%" v-model="time" :type="pickerType" :size="size" :clearable="clearable"
      :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder" :default-time="defaultTime"
      v-bind="attrsBind" @visible-change="updateValue" />
  </el-config-provider>
</template>

<script lang="ts" setup>
import i18n from "@/lang/index";
import { getStorage } from '@/utils/utils'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
// import Options as PopperOptions from '@popperjs/core'
import moment from 'moment';
// console.log('Options',PopperOptions);
const $t = i18n.global.t;
const locale = ref()
const props = defineProps({
  modelValue: {
    type: [String, Date, Array],
  },
  startPlaceholder: {
    type: String,
    default: 'Start date',
  },
  endPlaceholder: {
    type: String,
    default: 'End date',
  },
  multiple: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: 'default',
  },
  clearable: {
    type: Boolean,
    default: true,
  },
  valueFormat: {
    type: String,
    default: '',
  },
  // 'year' | 'years' |'month' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange'
  pickerType: {
    type: String,
    default: 'daterange',
  },
  format: {
    type: String,
    default: 'yyyy-MM-dd',
  },
  // 是否添加时分秒
  isShowDay: {
    type: Boolean,
    default: false,
  },
})
const { modelValue, size, clearable, startPlaceholder, endPlaceholder, pickerType, format, isShowDay } = toRefs(props)
locale.value = getStorage('language') === 'zh_CN' ? zhCn : en
console.log(locale.value);
// vue3 v-model简写
let time: any = computed({
  get() {
    return modelValue?.value
  },
  set(val) {
    dateChange(val)
    // return val
  },
})
// const modelValue = ref({})
const emits = defineEmits(['update:modelValue'])
// const defaultTime = ref<[Date, Date] | Date>([
//   new Date(2000, 1, 1, 0, 0, 0),
//   new Date(2000, 2, 1, 23, 59, 59),
// ] || new Date())
const defaultTime = computed(() => {
  switch (pickerType.value) {
    case 'year':
    case 'month':
    case 'date':
    case 'datetime':
    case 'week':
      return new Date()
    case 'datetimerange':
    case 'daterange':
    case 'monthrange':
      return [new Date(), new Date()]
  }
})
const updateValue = (event) => {
  // emits('update:modelValue', event);
}
const $attrs: any = useAttrs()
const attrsBind = computed(() => {
  let attrs = {}
  switch (pickerType.value) {
    case 'date':
    case 'dates':
      attrs['value-format'] = 'YYYY-MM-DD'
      attrs['placeholder'] = '请选择日期'
      break
    case 'week':
      // attrs['value-format'] = 'YYYY - ww'
      attrs['format'] = 'YYYY 第 ww 周'
      attrs['placeholder'] = '请选择周'
      break
    case 'month':
    case 'months':
      attrs['value-format'] = 'YYYY-MM'
      attrs['format'] = 'YYYY-MM'
      attrs['placeholder'] = '请选择月'
      break
    case 'year':
    case 'years':
      attrs['value-format'] = 'YYYY'
      attrs['format'] = 'YYYY'
      attrs['placeholder'] = '请选择年'
      break
    /**
     * 日期范围
     */
    case 'daterange':
      attrs['value-format'] = 'YYYY-MM-DD'
      attrs['range-separator'] = '~'
      attrs['start-placeholder'] = '请选择开始日期'
      attrs['end-placeholder'] = '请选择结束日期'
      break
    case 'monthrange':
      attrs['value-format'] = 'YYYY-MM'
      attrs['range-separator'] = '~'
      attrs['start-placeholder'] = '请选择开始月份'
      attrs['end-placeholder'] = '请选择结束月份'
      break
    /**
     * 日期和时间点
     */
    case 'datetime':
      attrs['format'] = 'YYYY-MM-DD HH:mm:ss'
      attrs['value-format'] = 'YYYY-MM-DD HH:mm:ss'
      attrs['placeholder'] = '请选择日期时间'
      break
    case 'datetimerange':
      attrs['format'] = 'YYYY-MM-DD HH:mm:ss'
      attrs['value-format'] = 'YYYY-MM-DD HH:mm:ss'
      attrs['range-separator'] = '~'
      attrs['start-placeholder'] = '请选择开始日期'
      attrs['end-placeholder'] = '请选择结束日期'
      break
  }
  return {
    ...attrs,
    ...$attrs,
  }
})
// 事件格式处理
const dateChange = (val: any) => {
  if (pickerType.value === 'daterange' && val) {
    let startTime = val[0]
    let endTime = val[1]
    if (isShowDay.value && val) {
      startTime = startTime + ' 00:00:00'
      endTime = endTime + ' 23:59:59'
    }
    // time.value = [startTime, endTime]
    // emits('change', [startTime, endTime])
    emits('update:modelValue', [startTime, endTime])
  } else {
    emits('update:modelValue', val)
    // emits('change', val)
  }
}
</script>
<style scoped>
/* .date_picker {
  width: 100%;
} */
</style>